@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@600&display=swap');

:root {
  --normal-2: 12px;
  --normal: 14px;
  --normal2: 16px;
  --normal4: 18px;
  --large: 32px;
  --large4: 36px;

  --dark: #111827;
  --blue: #007ab8;
  --light: #8ECAE6;
  --lighter: #f6f8fa;
  --yellow: #FFB703;
  --orange: #FB8500;
  --red: #e63946;
  --magenta-light: #EC4899;
  --magenta-dark: #DB2777;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-brand: "Rubik", var(--font-sans);
}

body {
  font-family: var(--font-sans);
  font-size: var(--normal);
}

.navbar-dark {
  background-color: var(--dark);
}

.navbar-dark .navbar-nav a.nav-link {
  font-size: var(--normal4);
  color: var(--lighter);
}

.navbar-brand {
  align-items: center;
  display: flex;
  gap: 16px;
  margin-right: .5rem;
}

.navbar-brand span {
  color: #FFF;
  font-family: var(--font-brand);
  transition: color .15s ease-in-out;
}

.navbar-brand:hover span {
  color: var(--magenta-light);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-nav a.nav-link.top-selected {
  color: var(--magenta-light);
}

.navbar-nav {
  padding-left: 3rem;
}

@media (max-width: 768px) {
  .navbar-nav {
    padding-left: 0;
  }
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--magenta-light);
}

.title {
  font-size: var(--large);
}

#sidebar-left {
  padding-top: 24px;
  position: fixed;
}

#sidebar-right {
  margin-top: 48px;
  margin-left: 64px;
  padding-top: 16px;
  padding-bottom: 8px;
  overflow-y: auto;
  max-height: calc(100vh - 82px - 64px - 32px - 32px);
  position: fixed;
  background-color: var(--lighter);
}

#sidebar-right a {
  padding-left: 32px;
  padding-right: 32px;
}

#sidebar-right::-webkit-scrollbar {
  width: 8px;
}

#sidebar-right::-webkit-scrollbar-track {
  background: var(--lighter);
}

#sidebar-right::-webkit-scrollbar-thumb {
  background: var(--lighter);
}

#sidebar-right:hover::-webkit-scrollbar-thumb {
  background: var(--blue);
}

#sidebar-right p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.row div.bottom-nav {
  background-color: var(--dark);
  padding-top: 1rem;
  padding-bottom: 1rem;;
}

.row div.bottom-nav ul li a {
  padding: 12px;
  font-size: var(--normal2);
}

a {
  text-decoration: none;
}

#documentation-container a {
  color: var(--blue);
}

#bottom-container a {
  color: var(--lighter);
}

#bottom-container table {
  border-color: var(--dark);
}

#documentation-container a:hover {
  color: var(--magenta-dark);
}

#documentation-container a.link-selected,
#bottom-container a.link-selected {
  color: var(--magenta-dark);
  animation: none;
}

.github-icon img {
  filter: invert(45%) sepia(24%) saturate(2418%) hue-rotate(289deg) brightness(93%) contrast(99%);
  width: 44px;
  margin-right: 8px;
}

img {
  max-width: 100%;
  height: auto;
}

h1, h2 {
  color: var(--red);
  padding-top: 16px;
}

h3, h4, h5, h6 {
  padding-top: 16px;
}

.code-object {
  color: var(--dark);
}

.code-class {
  color: var(--red);
}

.code-name {
  color: var(--blue);
}

.code-event {
  color: var(--magenta-dark);
}

.code-type {
  color: #a0a0a0;
}

.code-object:hover, .code-class:hover, .code-name:hover, .code-event:hover, .code-type:hover {
  color: var(--magenta-dark);
}

.magenta {
  color: var(--magenta-dark);
}

.api {
  margin-top: 64px;
  font-family: monospace;
  font-size: var(--normal4);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

html {
scroll-padding-top: max(128px, 30vh);
}

.api:target, h2:target {
  background-color: #FFFFC7;
}

.api-left {
  font-weight: bold;
}

.api-right {
  text-align: right;
  margin-left: 8px;
  font-size: var(--normal);
  max-width: 360px;
}

pre.highlight {
  border-radius: 5px;
  margin: 16px;
  background-color: var(--lighter);
  color: #393a34;
  padding: 8px;
}

pre.highlight code {
  font-size: var(--normal-2);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

pre.highlight .s1, pre.highlight .s2 {
  color: var(--blue);
}

pre.highlight .k {
  color: var(--red);
}

pre.highlight .kd {
  color: var(--red);
}

pre.highlight .mi {
  color: var(--orange);
}

pre.highlight .c1 {
  color: gray;
}

#content table {
  border-collapse: separate;
}

#content table.parameters {
  padding-left: 16px;
  padding-right: 16px;
  border-spacing: 2px;
  width: 100%;
  color: #393a34;
}

#content table + p {
  margin-top: 1rem;
}

#content table.parameters td {
  padding: 8px;
  background-color: var(--lighter);
  vertical-align: top;
}

#content table.parameters td:first-child {
  color: var(--blue);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#content table.parameters td:nth-child(2) {
  color: var(--red);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#content table.strings {
  padding-left: 16px;
  padding-right: 16px;
  border-spacing: 2px;
  width: 100%;
  color: #393a34;
}

#content table.strings td {
  padding: 8px;
  background-color: var(--lighter);
  vertical-align: top;
}

#content table.strings td:first-child {
  color: var(--blue);
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#content table.matrix {
  padding-left: 16px;
  padding-right: 16px;
  border-spacing: 2px;
}

#content table.matrix td {
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  color: var(--blue);
  background-color: var(--lighter);
}

.tag {
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 2px;
  padding-bottom: 4px;
  border-radius: 6px;
  font-size: var(--normal-2);
}

.tag.extension {
  color: white;
  background-color: var(--red);
}
